<!-- 智能工厂综合看板 -->
<template>
  <div class="mes-container">
    <div class="containerBox">
      <canvas id="canvas" style="position: absolute;top: 0;left: 0;"></canvas>
      <!-- 头部 -->
      <all-title ref="allTitle" :comp-info="compInfo" :title-name="titleName" />
      <div class="contentBox">
        <div class="leftBox fl">
          <!-- 采购/销售统计 -->
          <left-sales-procurement ref="leftSalesProcurement" />
          <!-- 生产完成情况 -->
          <left-factory-finish ref="leftFactoryFinish" :pro-list="proList" />
          <!-- 质检合格率 -->
          <left-qa-check ref="leftQaCheck" :qa-list="qaList" />
        </div>
        <div class="centerBox fl">
          <!-- 中间多个数量 -->
          <center-nums-info ref="centerNumsInfo" :all-nums="allNums" />
          <!-- 中间设备产量统计 -->
          <center-eq-line ref="centerEqLine" />
          <!-- 生产计划订单跟踪 -->
          <center-bottom-tab ref="centerBottomTab" :table-data="tableData" />
        </div>
        <div class="rightBox fl">
          <!-- 设备运行状态 -->
          <right-eq-run-status ref="rightEqRunStatus" />
          <!-- 仓储数据 -->
          <right-storage-data ref="rightStorageData" />
          <!--  -->
          <right-load-status ref="rightLoadStatus" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { bgFun } from '../../../bg.js'
import allTitle from '../components/allTitle'
import centerNumsInfo from './components/centerNumsInfo'
import leftSalesProcurement from './components/leftSalesProcurement'
import leftFactoryFinish from './components/leftFactoryFinish'
import leftQaCheck from './components/leftQaCheck'
import centerEqLine from './components/centerEqLine'
import centerBottomTab from './components/centerBottomTab'
import rightEqRunStatus from './components/rightEqRunStatus'
import rightStorageData from './components/rightStorageData'
import rightLoadStatus from './components/rightLoadStatus'
export default {
  name: 'FactorySignage',
  components: {
    allTitle,
    centerNumsInfo,
    leftSalesProcurement,
    leftFactoryFinish,
    leftQaCheck,
    centerEqLine,
    centerBottomTab,
    rightEqRunStatus,
    rightStorageData,
    rightLoadStatus
  },
  data() {
    return {
      titleName: '智能工厂综合看板',
      interval: () => {},
      proList: [],
      qaList: {},
      allNums: {},
      tableData: [],
      myChart: null
    }
  },
  computed: {
    ...mapGetters(['compInfo'])
  },
  created() {},
  async mounted() {
    const loading = this.$loading({
      lock: true,
      text: '数据加载中...', // 数据加载中...
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    setTimeout(async () => {
      loading.close()
      bgFun()
    }, 500)
    await this.getInfo()
    /* 根据浏览器收缩echarts重铸 */
    window.onresize = () => {
      if (this.$refs['leftSalesProcurement'].myChart)
        this.$refs['leftSalesProcurement'].infoSize()
      if (this.$refs['centerEqLine'].myChart)
        this.$refs['centerEqLine'].infoSize()
      if (this.$refs['rightEqRunStatus'].myChart)
        this.$refs['rightEqRunStatus'].infoSize()
      if (this.$refs['rightStorageData'].myChart)
        this.$refs['rightStorageData'].infoSize()
      if (this.$refs['rightLoadStatus'].myChart)
        this.$refs['rightLoadStatus'].infoSize()
    }
  },
  beforeDestroy() {},
  methods: {
    async getInfo() {
      const loading = this.$loading({
        lock: true,
        text: '数据加载中...', // 数据加载中...
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      setTimeout(async () => {
        loading.close()
        await this.$refs['leftSalesProcurement'].getSalesProcurement()
        await this.getFactoryFinish()
        await this.getQualifiedRate()
        await this.getAllStatistics()
        await this.$refs['centerEqLine'].getEquipProduce()
        await this.getPlanTrack()
        await this.$refs['rightEqRunStatus'].getEquipWorkStatus()
        await this.$refs['rightStorageData'].getWmsNumRate()
        await this.$refs['rightLoadStatus'].getFactoryWorkRate()
      }, 1000)
    },
    /* 获取生产完成情况 */
    async getFactoryFinish() {
      const res = await this.$axios.get('/board/composite/factoryFinish')
      if (res.data.code === 200) {
        this.proList = res.data.data
      }
    },
    /* 获取质检合格率 */
    async getQualifiedRate() {
      const res = await this.$axios.get(`/board/composite/qualifiedRate`)
      if (res.data.code === 200) {
        this.qaList = res.data.data
      }
    },
    /* 获取多个数量统计 */
    async getAllStatistics() {
      const res = await this.$axios.get(`/board/composite/allStatistics`)
      if (res.data.code === 200) {
        this.allNums = res.data.data
      }
    },

    /* 获取生产计划统计 */
    async getPlanTrack() {
      const res = await this.$axios.get('/board/composite/planTrack')
      if (res.data.code === 200) {
        this.tableData = res.data.data
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.mes-container {
  position: fixed;
  z-index: 999999 !important;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  // background: radial-gradient(hwb(221 0% 34%) 20%, #001439 70%);
  background: url(../../../assets/images/kb01/kbbg01.jpg) no-repeat;
  background-size: 100% 100%;
  min-width: 1100px;
  min-height: 620px;
  .containerBox {
    position: relative;
    height: 100%;
    /* 中间样式 */
    .contentBox {
      position: absolute;
      top: 70px;
      height: calc(100% - 70px);
      width: 100%;
      padding: 10px;
      .leftBox {
        width: 25%;
        height: 100%;
      }
      .centerBox {
        width: 50%;
        height: 100%;
      }
      .rightBox {
        width: 25%;
        height: 100%;
      }
    }
  }
}
</style>
<style lang='scss'>
</style>

